<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
  <title>首页</title>
  <link rel="stylesheet" type="text/css" href="./css/api.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <style>
    header {
      background-color: #1abc9c;
    }

    header ul li {
      height: 50px;
      line-height: 50px;
      text-align: center;
      display: none;
      color: #fff;
      position: relative;
      font-size: 18px;
    }

    header ul li.active {
      display: block;
    }

    #footer {
      background-color: #f2f2f2;
    }

    #footer ul li {
      padding-top: 36px;
      padding-bottom: 4px;
      background: url() no-repeat center 2px;
      background-size: auto 30px;
      text-align: center;
    }

    #footer ul li.active {
      color: #1abc9c;
    }

    #footer ul li:nth-child(1) {
      background-image: url(./image/bottombtn0101.png);
      background-size: 34%;
    }

    #footer ul li:nth-child(2) {
      background-image: url(./image/bottombtn0201.png);
    }

    #footer ul li:nth-child(3) {
      background-image: url(./image/bottombtn0301.png);
    }

    #footer ul li:nth-child(4) {
      background-image: url(./image/bottombtn0401.png);
    }

    #footer ul li:nth-child(5) {
      background-image: url(./image/bottombtn0501.png);
      background-size: 34%;
    }

    #footer ul li:nth-child(1).active {
      background-image: url(./image/bottombtn0102.png);
      background-size: 34%;
    }

    #footer ul li:nth-child(2).active {
      background-image: url(./image/bottombtn0202.png);
    }

    #footer ul li:nth-child(3).active {
      background-image: url(./image/bottombtn0302.png);
    }

    #footer ul li:nth-child(4).active {
      background-image: url(./image/bottombtn0402.png);
    }

    #footer ul li:nth-child(5).active {
      background-image: url(./image/bottombtn0502.png);
      background-size: 34%;
    }

    .flex-con {
      overflow: auto;
    }

    .toobarimg {
      right: 15px;
      bottom: 23px;
      height: 26px;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="wrap" class="flex-wrap flex-vertical">
    <header>
      <ul>
        <li class="border-b active">
          <label id="project"></label><img id="qhhh" class="toobarimg" src="image/qiehuan.png" tapmode
            onclick="openDetail('./list.html')" />
        </li>
        <li class="border-b">
          工作台
        </li>
        <li class="border-b">
          巡查台账

          <!-- <img class="toobarimg" src="image/fabu.png" style="display: none;" tapmode
            onclick="openDetail('html/xuncha/xuncha_window.html')" id="fttp" /> -->
          <div class="toobarimg" style="display: none;font-size: 15px"
            onclick="openDetail('html/xuncha/xuncha_window.html')" id="fttp">添加</div>
        </li>
        <li class="border-b" id="yanghu">
          养护管理
          <!--<img id="addsbbnb" class="toobarimg" src="image/fabu.png" tapmode />-->
        </li>
        <li class="border-b">
          我的
        </li>
      </ul>
    </header>
    <div id="main" class="flex-con"></div>
    <div id="footer" class="border-t">
      <ul class="flex-wrap">
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active">
          首页
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">
          控制盘
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">
          巡查
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">
          养护
        </li>
        <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">
          我的
        </li>
      </ul>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
  apiready = function () {

    //  绑定用户
    var push = api.require('push');
    push.bind({
      userName: 'testName',
      userId: 'testId'
    }, function (ret, err) {
      if (ret.status) {
        /*  api.alert({
           msg: '绑定成功'
         }); */
      } else {
        api.alert({
          msg: err.msg
        });
      }
    });

    $api.fixStatusBar($api.dom("header"));
    api.setStatusBarStyle({
      style: "dark",
      color: "#1abc9c",
    });
    funIniGroup();


    var reg = $api.getStorage("userSession");
    var sids = reg.data.sysRole.sysRoleCode;
    var role = sids.role_number;
    if (role == "manage") {
      $("#project").text($api.getStorage("selectpor").projectName);
      $("#fttp").show();
    } else {
      $("#qhhh").hide();
      $("#fttp").hide();
    }
  };

  //权限判断，只有施工角色可以跳转到添加页
  var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
  if (sids == "construction") {
    $("#yanghu").append(
      '<span id="addsbbnb" style="font-size:15px;" class="toobarimg">添加</span>'
    );
    var bbnb = document.getElementById("addsbbnb");

    function tabAdd(s) {
      switch (s) {
        //绿地养护新增
        case 0:
          bbnb.onclick = function () {
            openDetail("html/yanghu/lvdiyanghuadd_window.html");
          };
          break;
        //卫生清理
        case 1:
          bbnb.onclick = function () {
            openDetail("html/yanghu/weishengyanghuadd_window.html");
          };
          break;
        //设施维护
        case 2:
          bbnb.onclick = function () {
            openDetail("html/yanghu/sheshiyanghuadd_window.html");
          };
          break;
        //植保工作
        case 3:
          bbnb.onclick = function () {
            openDetail("html/yanghu/zhibaoyanghuadd_window.html");
          };
          break;
      }
    }
  } else {
    $("#yanghu").append(
      '<input id="addsbbnb" class="toobarimg" type="hidden" tapmode \/>'
    );
    var bbnb = document.getElementById("addsbbnb");

    function tabAdd(s) {
      switch (s) {
        //绿地养护新增
        case 0:
          bbnb.onclick = function () {
            openDetail("html/yanghu/lvdiyanghuadd_window.html");
          };
          break;
        //卫生清理
        case 1:
          bbnb.onclick = function () {
            openDetail("html/yanghu/weishengyanghuadd_window.html");
          };
          break;
        //设施维护
        case 2:
          bbnb.onclick = function () {
            openDetail("html/yanghu/sheshiyanghuadd_window.html");
          };
          break;
        //植保工作
        case 3:
          bbnb.onclick = function () {
            openDetail("html/yanghu/zhibaoyanghuadd_window.html");
          };
          break;
      }
    }
  }
  var bbnb = document.getElementById("addsbbnb");

  function tabAdd(s) {
    switch (s) {
      case 0:
        bbnb.onclick = function () {
          openDetail("html/yanghu/yanghu_window.html");
        };
        break;
      case 1:
        bbnb.onclick = function () {
          openDetail("htmlasd/yanghu/yanghu_window.html");
        };
        break;
    }
  }

  function funIniGroup() {
    var eHeaderLis = $api.domAll("header li"),
      frames = [];
    /*     for (var i = 0, len = eHeaderLis.length; i < len; i++) {
          frames.push({
            name: "frame" + i,
            url: "./html/frame" + i + ".html",
            bgColor: "rgba(0,0,0,.2)",
            bounces: false,
          });
        } */
    var ret = $api.getStorage("userSession");
    if (ret.data.sysRole.sysRoleCode.role_number == "manage") { //管理角色选择项目
      frames.push({
        name: "frame0",
        url: "./html/adminHome.html",
        bgColor: "rgba(0,0,0,.2)",
        bounces: false,
      });
    } else if (ret.data.sysRole.sysRoleCode.role_number == "enterprise") { //领导角色无
      frames.push({
        name: "frame0",
        url: "./html/frame0.html",
        bgColor: "rgba(0,0,0,.2)",
        bounces: false,
      });
    } else if (ret.data.sysRole.sysRoleCode.role_number == "construction") { //施工角色直接进入
      frames.push({
        name: "frame0",
        url: "./html/constructionIndex.html",
        bgColor: "rgba(0,0,0,.2)",
        bounces: false,
      });
    } else {
      frames.push({
        name: "frame0",
        url: "./html/frame0.html",
        bgColor: "rgba(0,0,0,.2)",
        bounces: false,
      });
    }

    frames.push({
      name: "frame1",
      url: "./html/frame1.html",
      bgColor: "rgba(0,0,0,.2)",
      bounces: false,
    });
    frames.push({
      name: "frame2",
      url: "./html/frame2.html",
      bgColor: "rgba(0,0,0,.2)",
      bounces: false,
    });
    frames.push({
      name: "frame3",
      url: "./html/frame3.html",
      bgColor: "rgba(0,0,0,.2)",
      bounces: false,
    });
    frames.push({
      name: "frame4",
      url: "./html/frame4.html",
      bgColor: "rgba(0,0,0,.2)",
      bounces: false,
    });
    api.openFrameGroup({
      name: "group",
      scrollEnabled: false,
      rect: {
        x: 0,
        y: $api.dom("header").offsetHeight,
        w: api.winWidth,
        h: $api.dom("#main").offsetHeight,
      },
      index: 0,
      frames: frames,
    },
      function (ret, err) { }
    );
    api.setFrameGroupIndex({
      name: "group",
      index: 0,
      reload: true, // 设置为true
    });
  }

  // 随意切换按钮
  function randomSwitchBtn(tag) {
    if (tag == $api.dom("#footer li.active")) return;
    var eFootLis = $api.domAll("#footer li"),
      eHeaderLis = $api.domAll("header li"),
      index = 0;
    for (var i = 0, len = eFootLis.length; i < len; i++) {
      if (tag == eFootLis[i]) {
        index = i;
      } else {
        $api.removeCls(eFootLis[i], "active");
        $api.removeCls(eHeaderLis[i], "active");
      }
    }
    $api.addCls(eFootLis[index], "active");
    $api.addCls(eHeaderLis[index], "active");
    api.setFrameGroupIndex({
      name: "group",
      index: index,
      reload: true, // 设置为true
    });
  }
</script>